<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据中心</title>
    <link rel="stylesheet" href="./library/bs/css/bootstrap.min.css">
    <script src="./library/bs/js/bootstrap.bundle.min.js"></script>
    <script src="./library/axios-1.7.2/dist/axios.min.js"></script>
    <script src="./library/echarts.js"></script>
    <link rel="stylesheet" href="./css/dataCenter.css">
</head>
<body>

<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow-sm text-center" style="z-index: 100">
    <a class="navbar-brand col-md-3 col-lg-1 me-0 px-3 fs-6" href="#">数据中心</a>
    <a class="navbar-brand col-md-3 col-lg-1 me-0 px-3 fs-6" href="index.html">首页</a>
    <button class="navbar-toggler  d-md-none collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <form id="searchForm" class="d-flex w-100 ">
        <input class="form-control form-control-dark w-100 rounded-0 border-0 text-center" type="text"
               placeholder="请输入姓名进行搜索" aria-label="Search">
    </form>
</header>

<div class="container-fluid">
    <div class="row">
        <nav id="sidebarMenu" class="col-md-3  col-lg-2 d-md-block bg-light sidebar collapse ">
            <div class="position-sticky  sticky-top sidebar-sticky  " style="background: inherit;z-index: 0;top: 5%">

                <ul class="nav nav-pills  flex-column my-2">
                    <!--                    <li class="nav-item">-->
                    <!--                        <button class="nav-link active w-100 text-start" id="1" data-bs-toggle="pill">Home</button>-->
                    <!--                    </li>-->
                    <!--                    <li class="nav-item">-->
                    <!--                        <button class="nav-link  w-100 text-start" id="2" data-bs-toggle="pill">Home</button>-->
                    <!--                    </li>-->
                    <!--                    <li class="nav-item">-->
                    <!--                        <a class="nav-link" href="#">-->
                    <!--                            <span data-feather="shopping-cart" class="align-text-bottom"></span>-->
                    <!--                            CSS综合任务1&#45;&#45;基础样式-->
                    <!--                        </a>-->
                    <!--                    </li>-->
                    <!--                    <li class="nav-item">-->
                    <!--                        <a class="nav-link" href="#">-->
                    <!--                            <span data-feather="users" class="align-text-bottom"></span>-->
                    <!--                            CSS综合任务2-&#45;&#45;定位与动画-->
                    <!--                        </a>-->
                    <!--                    </li>-->
                    <!--                    <li class="nav-item">-->
                    <!--                        <a class="nav-link" href="#">-->
                    <!--                            <span data-feather="bar-chart-2" class="align-text-bottom"></span>-->
                    <!--                            轮播图与待办列表-->
                    <!--                        </a>-->
                    <!--                    </li>-->
                    <!--                    <li class="nav-item">-->
                    <!--                        <a class="nav-link" href="#">-->
                    <!--                            <span data-feather="layers" class="align-text-bottom"></span>-->
                    <!--                            时钟与计算器-->
                    <!--                        </a>-->
                    <!--                    </li>-->
                </ul>


            </div>
        </nav>

        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">分数统计表</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toExcel('排行榜')">导出为Excel</button>
                    </div>
                </div>
            </div>

            <div class="my-4 w-100" id="myChart" style="height:400px;"></div>
            <h2>排行榜</h2>
            <div class="table-responsive">
                <table class="table  table-bordered text-center" id="table_report">
                    <thead>
                    <tr>
                        <th scope="col-1">排名</th>
                        <th scope="col-2">学号</th>
                        <th scope="col-2">姓名</th>
                        <th scope="col-2">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                    班级
                                </button>
                                <ul class="dropdown-menu" data-name="classList">
                                    <li><a class="dropdown-item" href="#">23软件技术1班</a></li>
                                    <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                                </ul>
                            </div>
                        </th>
                        <th scope="col-1">任务得分</th>
                        <th scope="col-1">加减分</th>
                        <th scope="col-1">加减分说明</th>
                        <th scope="col-1">当前分数</th>
                        <th scope="col-1">最终成绩</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </main>
    </div>
</div>

<script src="./js/mybar.js"></script>
<script src="./js/script.js"></script>
<script src="./js/dataCenter.js"></script>

</body>

</html>
